<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的分销',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view class="bg-[#f4f4f4] min-h-[100vh] page">
    <gray-header title="我的分销">
      <view
        v-if="userStore.isLogin"
        class="bg-white rounded-sm pt-[20rpx] pb-5 mx-[20rpx] mt-[100rpx] relative"
      >
        <view
          class="border-[10rpx] border-solid border-white rounded-1/2 absolute -left-0 top-0 transform -translate-y-[35%]"
        >
          <wd-img
            width="130rpx"
            height="130rpx"
            :round="true"
            :src="userStore.userInfo.avatar"
          ></wd-img>
        </view>

        <view class="ml-[164rpx] flex items-center">
          <text class="text-[26rpx] text-base font-bold">{{ userStore.userInfo.nickname }}</text>
          <view class="text-white ml-1 mt-1 w-10 text-[20rpx] relative">
            <image class="w-full" mode="widthFix" src="/static/badge.png"></image>
            <text class="absolute right-[10rpx] top-[5rpx]">
              lv.{{ userStore.userInfo.distributionLevel.id }}
            </text>
          </view>
          <view
            class="ml-auto text-[#9A9A9A] text-xs flex items-center mr-[10rpx]"
            @click="openPopup(1)"
          >
            <text>分销规则</text>
            <wd-icon name="caret-right-small" size="44rpx" color="#9A9A9A"></wd-icon>
          </view>
        </view>

        <view class="flex mt-[50rpx]">
          <view
            class="distribution"
            v-for="(item, index) in distribution"
            :key="index"
            @click="handleJump(item.url)"
          >
            <text class="text-[38rpx] mb-[2rpx] font-bold">{{ item.value }}</text>
            <text class="text-[22rpx] text-[#9A9A9A]">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </gray-header>

    <template v-if="userStore.isLogin">
      <view class="mt-[50rpx] mx-[20rpx] bg-white rounded-sm overflow-hidden">
        <view class="border-b border-b-solid border-[#EDEDED] text-base text-[30rpx] p-4 font-bold">
          我的团队
        </view>
        <!-- <wd-tabs v-model="state.curTab">
          <wd-tab :title="item.name" v-for="(item, index) in state.tabList" :key="index"></wd-tab>
        </wd-tabs> -->
        <k-list
          :is-empty="!list.length"
          :loading="loading"
          :statusType="isDistribution != 4 ? '/static/images/null_quanxian.png' : 'search'"
          :statusTip="isDistribution != 4 ? '暂无权限，请先申请' : '暂没有数据'"
        >
          <view class="mt-4">
            <members :user="item" v-for="item in list" :key="item"></members>
          </view>
        </k-list>
      </view>
      <float-bottom customClass="min-h-[116rpx] flex items-center " v-if="isDistribution != 4">
        <view class="mx-[20rpx] w-full">
          <wd-button
            :disabled="isDistribution == 0"
            size="large"
            :round="false"
            custom-class="w-full"
            @click="openPopup(2)"
          >
            {{ applyBtnText }}
          </wd-button>
        </view>
      </float-bottom>

      <wd-popup
        v-model="state.showPopup"
        position="bottom"
        custom-class="rounded-lg"
        :safe-area-inset-bottom="true"
      >
        <view class="flex justify-between items-center p-4 text-base">
          <text>{{ popupTitle }}</text>
          <wd-icon name="close" size="22rpx" color="#141719" @click="closePopup"></wd-icon>
        </view>

        <view class="pb-4">
          <template v-if="state.popupType === 1">
            <view class="text-base text-[26rpx] px-4">
              <uv-parse :nodes="imgDeal(userStore.userInfo?.distribution_rule)"></uv-parse>
            </view>
          </template>
          <applyForm v-else @success="closePopup" />
        </view>
      </wd-popup>
    </template>
    <view v-else>
      <wd-status-tip
        image="/static/images/null_quanxian.png"
        tip="请登录之后再访问"
      ></wd-status-tip>
      <view class="w-4/5 mx-auto mt-3">
        <wd-button :round="false" custom-class="w-full" @click="toLogin">登录</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { to, toLogin } from '@/utils/navigation'
import useUserStore from '@/store/user'
import { fetchTeamList } from '@/service/user'
import useReachBottomLoadMore from '@/hooks/useReachBottomLoadMore'
import applyForm from './components/apply-form.vue'
import grayHeader from './components/gray-header.vue'
import members from './components/members.vue'
import { imgDeal } from '@/utils/format'

const userStore = useUserStore()

const isDistribution = computed(() => {
  if (!userStore.isLogin) return 4
  const userInfo = userStore.userInfo
  return Object.hasOwn(userInfo, 'is_distribution') ? userInfo.is_distribution : 4
})

const applyBtnText = computed(() => {
  if (!userStore.isLogin) return ''
  const { is_distribution } = userStore.userInfo
  const maps = {
    '-1': '申请分销权限',
    0: '审核中',
    1: '审核中',
    2: '审核不通过，重新申请',
  }

  return maps[is_distribution]
})

const distribution = computed(() => {
  const { total_earnings, user_earnings, withdraw_earnings } = userStore.userInfo
  return [
    {
      name: '总佣金',
      value: total_earnings || 0,
      url: 'brokerage',
    },
    {
      name: '可提现',
      value: user_earnings || 0,
      url: 'withdraw',
    },
    {
      name: '已提现',
      value: withdraw_earnings || 0,
      url: 'withdraw-record',
    },
  ]
})
const state = ref({
  popupType: 0,
  showPopup: false,
  curTab: 0,
  tabList: [
    {
      name: '一级',
      value: 'first',
    },
    {
      name: '二级',
      value: 'second',
    },
  ],
})

const requestParams = computed(() => {
  const { curTab, tabList } = state.value
  return {
    type: tabList[curTab].value,
  }
})

const { refresh, data: list, loading } = useReachBottomLoadMore(fetchTeamList, requestParams)

const popupTitle = computed(() => {
  return state.value.popupType === 1 ? '分销规则' : '申请分销权限'
})

function openPopup(type) {
  state.value.popupType = type
  state.value.showPopup = true
}

function closePopup() {
  state.value.showPopup = false
}

function handleJump(url) {
  if (!url) return
  to(`pages-sub/person/${url}`)
}

onLoad(() => {
  if (userStore.isLogin) refresh()
})
</script>

<style lang="scss" scoped>
.page {
  @include addSafeArea(146rpx);
}

.distribution {
  @apply flex flex-col justify-center items-center relative w-1/3;

  &::after {
    height: 48rpx;
    content: '';
    border-right: 1px solid #e2e2e2;
    @apply absolute right-0 top-1/2 transform -translate-y-1/2;
  }

  &:last-child {
    &::after {
      @apply hidden;
    }
  }
}
</style>
